@(customerOrderForm: Form[CustomerOrder])

@import helper._

@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.render) }



@main {

<link rel="stylesheet" type="text/css" media="screen" href='@routes.Assets.at("stylesheets/order.css")'>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/ui-lightness/jquery-ui-1.8.19.custom.css")'>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/ui-lightness/jquery-ui-1.8.19.custom.css")'>
<script src= '@routes.Assets.at("javascripts/jquery-ui-1.8.19.custom.min.js")'></script>

<script>
    $(document).ready(function(){
        $("#khachHang").autocomplete({
            source: "/order/allDataCustomer",
            minLength: 2,
            select: function( event, ui ) {
                console.log(ui.item.id);
                $('#customerID').val(ui.item.id);
            }
        });
    });

</script>

<h1>Nhập đơn hàng</h1>


@form(routes.OrderController.save()) {

<fieldset>

    @inputText(customerOrderForm("soDonHang"), '_label -> "Số Đơn Hàng",'_help -> "bắt buộc", 'readonly ->"readonly")
    @inputText(customerOrderForm("ngayDatHang"), '_label -> "Ngày Đặt Hàng",'_help -> "dd/MM/yyyy")
    @inputText(customerOrderForm("khachHang"), '_id -> "KH", '_label -> "Khách hàng",'_help -> "bắt buộc")
    <input type="hidden" name="customerID" id="customerID" value=""/>
    <input type="hidden" name="productOrdersAsJson" id="children_id" value=""/>
</fieldset>

<div class="input_Children">


    <div id="allChildren_id">
        <ul class="children_header">
            <li> Mã </li>
            <li> Số Lượng </li>
            <li> Đơn Giá </li>
        </ul>

    </div>

    <br class="clearfloat">

    <div id="Add_new_row">
        <ul >
            <li> <input type="text"  id="add_ma"   size="400"> </li>
            <li> <input type="text"  id="add_soLuong"> </li>
            <li> <input type="text"  id="add_donGia"> </li>
            <li  class="moreInfo_btn"> <input type="button" value="Thêm" id="AddProduct" onclick="addProductInOrder()"></li>
        </ul>
    </div>




</div>

<br class="clearfloat">

<div class="actions">
    <input type="submit" value="Tạo Đơn Hàng" class="btn primary"> hoặc
    <a href="@routes.OrderController.list()" class="btn">Hủy</a>
</div>
}


<script type='text\html' id='productOrder_tpl'>
    <br class="clearfloat">
    <ul class="ul_productOrder" title="-1">
        <li> ${ma} </li>
        <li> ${donGia} </li>
        <li> ${soLuong} </li>
        <li> <input type="button" value="Xóa" onclick="delMoreInfo(this)"> </li>
    </ul>
</script>


}

